React & TypeScript-白红宇

之前看了一下 TypeScript 的知识，但是一直没有上手，最近开始结合 React 和 TypeScript 一起尝试了一下，感受还是很好的，所以写一下笔记。

环境配置没有参考其他东西，就是看了下和的官方文档，使用 Webpack 进行构建还是比较简单的。

环境构建

创建一个项目目录，然后切换当前目录到项目目录下：

$ mkdir tsc && cd ./tsc复制代码

然后使用 npm 初始化项目：

$ npm init -y复制代码

然后创建一些项目文件：

$ mkdir build src$ touch build/webpack.base.conf.js build/webpack.dev.conf.js build/webpack.prod.conf.js index.html src/index.tsx tsconfig.json复制代码

接下来，就可以安装一些依赖了：

$ npm i webpack webpack-cli webpack-merge webpack-dev-server -D$ npm i html-webpack-plugin clean-webpack-plugin typescript ts-loader style-loader css-loader @types/react @types/react-dom -D$ npm i react react-dom -S复制代码

可以注意到我们没有安装 babel 转译器，如果我们只写 .ts 或者 .tsx 文件，可以不安装 babel。如果要转译处理 .js 文件的话，还是要使用到 babel。

我们先写基础配置：

webpack.base.conf.js

const path = require('path');const htmlWebpackPlugin = require('html-webpack-plugin');const cleanWebpackPlugin = require('clean-webpack-plugin');module.exports = {  entry: path.resolve(__dirname, '../src/index.tsx'),  output: {    filename: '[name].[hash].js'  },  resolve: {    extensions: ['*', '.js', '.json', '.ts', '.tsx']  },  module: {    rules: [      {        test: /\.tsx?$/,        use: 'ts-loader',        exclude: /node_modules/      },      {        test: /\.css$/,        use: ['style-loader', 'css-loader']      }    ]  },  plugins: [    new htmlWebpackPlugin({      inject: true,      template: path.resolve(__dirname, '../index.html')    }),    new cleanWebpackPlugin(['dist'])  ]};复制代码

然后可以构造开发环境下的配置文件：

webpack.dev.conf.js

const merge = require('webpack-merge');const path = require('path');const baseConfig = require('./webpack.base.conf');module.exports = merge(baseConfig, {  mode: 'development',  devtool: 'source-map',  devServer: {    port: 9999,    open: true,    contentBase: path.resolve(__dirname, '../dist')  }});复制代码

然后添加 npm 脚本到 package.json 中：

"scripts": {  "test": "echo \"Error: no test specified\" && exit 1",  "dev": "webpack-dev-server --config ./build/webpack.dev.conf.js"}复制代码

然后添加我们的 ts 配置到 tsconfig.json：

{  "compilerOptions": {    "outDir": "./dist/",  // 打包输出目录    "noImplicitAny": true,  // 默认必须为变量指定类型    "module": "es6", // 使用 ESM 模块化方案    "target": "es5", // 代码编译成 ES 5    "jsx": "react", // 开启 JSX，使用 react 方式编译，如果要使用 babel 编译，那就将 jsx 设置为 ‘preserve’    "allowJs": true, // 允许编译 js 代码    "sourceMap": true,  // 编译后同时产出 map 文件    "removeComments": true // 移除注释  }}复制代码

更多的配置项解释，参考：。

写完了以后我们就可以添加内容到我们的开发文件中了：

index.html

  
      
      
      Document  
    
复制代码

src/index.tsx

import * as React from 'react';import * as ReactDOM from 'react-dom';ReactDOM.render(  Hello TSX!
,  document.getElementById('root') as HTMLElement);复制代码

可以注意到引入 React 和 ReactDOM 的方式和之前有一些不同。另外由于 TypeScript 的强制转换符 <> 和 JSX 的元素相冲突，所以使用 as 作为强制转换符。

运行 npm run dev，可以查看效果。

使用 TypeScript 以后，项目配置要稍微简单一点。配置好开发环境以后，就可以写代码啦！

第一个组件

我以一个 Header 组件为例，效果如下：

新建一个 Header.tsx 文件和一个 Header.css 文件到 src/components 下。

由于头部栏的标题文字应该是可以修改的，然后右边的 menu 应该是可以自定义的，所以这些数据应该都可以通过 props 传入我们的 Header 组件。

写我们的 Header 组件：

// Header.tsx// 引入 Reactimport * as React from 'react';// 引入我们的组件样式import './Header.css';// 定义的接口，用于规范 Header 组件的 props，向外界公开，// 便于在其他组件中引用时实现这个接口，减少错误export interface HeaderProps {  title: string; // 必须给定 title，一个 string 类型的值  menus?: MenuItemProps[];  // menus 是可选属性，是一个符合 MenuItemProps 接口规范的对象的数组  height?: string;  // 问号都代表可选项  bgColor?: string;}// 这个接口定义了 MenuItem 组件的 props 规范，同时也定义了// HeaderProps 中 menus 数组的元素的规范interface MenuItemProps {  name: string;  // 给定 menu 的名称  href: string;  // 给定 menu 要跳转的链接}// 定义了 Header 组件的 state 的规范interface HeaderState {  isVisible: boolean // 代表 Header 组件是否可见}// Header 组件// 注意 React.Component 后面的泛型，就是我们上方定义的接口，它们分别制定了组件的 props 和 state 的规范class Header extends React.Component
    
      {  // 指定组件实例的 state，必须符合 HeaderState 的规范  state = {    isVisible: true  }  render() {    const {      title,      menus = [],      height = '50px',      bgColor = 'lightblue'    } = this.props;  // 从 props 获取值，其中可选项都有默认值    const style = {      height,      backgroundColor: bgColor    };  // 构造 Header 内联样式    return this.state.isVisible ? 
           
      {title}      
      
               {          menus.map(item => 
       )        }      
      
    
     
 : null;  }}// MenuItem 组件// state 的规范是一个 object，未指定具体接口类型class MenuItem extends React.Component
     
       {  render() {    const { name, href } = this.props;    return 
            {name}      }}// 最后向外部暴露 Header 组件export default Header;复制代码

可以看到 TypeScript 结合 React 其实很好用，尤其在规范 props 的时候很好用，能够避免很多编程时候的错误。而 IDE 的提示能够更加地方便我们开发。写起来何止舒服，简直舒服啊～

然后在 Header.css 写一下我们的样式：

html,body,div {  margin: 0;  padding: 0;  font-size: 16px;}.header {  font-size: 1.5rem;  line-height: 1rem;  padding: 1rem;  box-sizing: border-box;  position: relative;}.header-menus {  position: absolute;  right: 1rem;  top: 50%;  transform: translateY(-50%);}.header-menu-item {  margin: 0 .5rem;}复制代码

这里仅仅是做个示例，排版没有在意太多的通用性，大家看看就好～

然后我们就可以在 index.tsx 中使用我们的 Header 组件了：

import * as React from 'react';import * as ReactDOM from 'react-dom';import Header, { HeaderProps } from './components/Header';  // 引入接口规范和组件// 构造 Header 组件的 props，必须符合 HeaderProps 接口规范。// 在写的过程中 IDE 也能给我们很多的提示，方便了开发const headerProps: HeaderProps = {  title: 'Hello TSX!',  menus: [{    name: 'menu1',    href: 'https://www.zhongdeming.fun'  }, {    name: 'menu2',    href: 'https://www.baidu.com'  }],  bgColor: 'lightyellow'};ReactDOM.render(  
    
,  document.getElementById('root') as HTMLElement);复制代码

这样一个组件就写完了，可以感受到 TypeScript 确实能够加速我们的开发，减少开发中的错误。

下面是一些利用 TypeScript 开发的时候 IDE 给出的提示的截图：